<template>
	<Reply ref="reply" @upDate="upDate" />
	<view class="videoDetail f ai-c jc-c">
		<view class="f ai-c jc-s-b ph-32 pv-12 hearder" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="w-64 h-72 b-64 f ai-c jc-c black" @click="toBack">
				<image src="http://cwht.ricecs.cn/app/shop/back-b.png" class="w-40 h-40"></image>
			</view>
			<view class="f ai-c mp-weixin">
				<button type="default" style="border: none;padding: 0;margin: 0;width: 40rpx;" plain open-type="share">
					<image src="http://cwht.ricecs.cn/app/shop/share-h.png" class="w-40 h-40"></image>
				</button>
				
			</view>
		</view>

		<!-- <video :src="detail.videoUrl" :controls="false" autoplay object-fit="cover" style="width: 100vw;height: 100vh;" ></video> -->
		<video :src="detail.videoUrl" controls :autoplay="true" class="w-f h-422" id="videoId" v-if="detail.videoUrl&&!show"></video>
		<view class="bot">
			<view class="ph-32">
				<view class="f ai-c">
					<image :src="detail.avatar" class="w-72 h-72 b-72 mr-16"></image>
					<view class="fs-32 fw-600 text-color5">{{ detail.memberNickname }}</view>
				</view>
				<view class="fs-28 text-color10 mt-20">{{ detail.content }}</view>
				<!-- <view class="fs-28 text-color10">＃社牛萌宠养成计划＃喵星人服装秀 ＃喵星人搞笑造型＃宠胖.</view> -->
				<view class="f jc-s-b mt-12">
					<view class="fs-24 text-color3">{{ detail.updateTime }} {{ detail.address }}</view>
					<view class="w-60 h-60 b-60 full f ai-c jc-c" @click="fandleFull">
						<image src="http://cwht.ricecs.cn/app/novice/full.png" class="w-28 h-28"></image>
					</view>
				</view>
			</view>
			<view class="operate mt-32">
				<view class="f ai-c jc-s-b ph-32 h-100">
					<view class="w-300 h-72 b-72 pl-28 input-box f ai-c" @click="comment">
						<image src="http://cwht.ricecs.cn/app/novice/edit.png" class="w-28 h-28 mr-12"></image>
						<text style="color: #ccc;">说点什么吧…</text>
						<!-- <u--input placeholder="说点什么吧…" border="none" v-model="text" fontSize="12"
							:placeholderStyle="{ color: '#CCCCCC' }" readonly></u--input> -->
					</view>
					<view class="f ai-c f1 jc-f-e">
						<image src="http://cwht.ricecs.cn/app/novice/collect-b.png" class="w-40 h-40 mr-12" @click="handleFollow">
						</image>
						<view class="fs-28 fw-600 text-color5 mr-40" :class="detail.followEnabled ? 'text-color' : 'text-color5'"
							@click="handleFollow">{{detail.followCount }}</view>
						<image src="http://cwht.ricecs.cn/app/novice/comment-b.png" class="w-40 h-40 mr-12" @click="show = true">
						</image>
						<view class="fs-28 fw-600 text-color5 mr-40">{{ detail.commentCount }}</view>
						<image src="http://cwht.ricecs.cn/app/novice/zan-b.png" class="w-40 h-40 mr-12" @click="handleZan"></image>
						<view class="fs-28 fw-600 text-color5" :class="detail.likeEnabled ? 'text-color' : 'text-color5'"
							@click="handleZan">{{detail.likeCount}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 弹框 -->
		<u-popup :show="show" @close="close" round="12">
			<view class="pt-40">
				<view class="fs-28 text-color2 ph-32">共<text class="fw-600">{{ detail.commentCount }}</text> 条评论</view>
				<!-- <view class="f ai-c jc-s-b mt-38 mb-8 ph-32">
                    <image :src="userInfo.avatar" class="w-72 h-72 b-72 mr-24"></image>
                    <view class="w-f h-72 ph-28 input b-72 f ai-c f1" @click="comment">
                        <u--input
                            placeholder="我来发表…"
                            border="none"
                            v-model="text"
                            fontSize="12"
                            :placeholderStyle="{ color: '#999999' }"
                            readonly
                        ></u--input>
                    </view>
                </view> -->
				<scroll-view scroll-y="true" class="comment">
					<view class="f jc-s-b mt-24 ph-32" v-for="(item, index) in list" :key="index">
						<image :src="item.avatar" class="w-72 h-72 b-72 mr-20"></image>
						<view class="info pb-25 f f1 fd-c">
							<view class="f jc-s-b f1">
								<view class="f f1 mr-32 fd-c" @click="handleReply(item)">
									<view class="fs-28 text-color3">{{ item.memberNickname }}</view>
									<view class="fs-28 text-color4 mt-4">{{ item.commentContent }}</view>
									<view class="f ai-c mt-8">
										<view class="mr-8 fs-24 text-color3">{{item.updateTime}} {{item.city}}</view>
										<view class="fs-24 text-color2">回复</view>
									</view>
								</view>
								<view @click="commentZan(item,index)">
									<image src="http://cwht.ricecs.cn/app/novice/zaned.png" class="w-32 h-32 mb-8" v-if="item.likeFlag"></image>
									<image src="http://cwht.ricecs.cn/app/novice/zan.png" class="w-32 h-32 mb-8" v-else></image>
									<view class="fs-20 text-color3">{{item.commentLikeCount}}</view>
								</view>
							</view>
							<!-- 下级回复 -->
							<view v-if="item.childes">
							<view class="f jc-s-b mt-24" v-for="(item2,index2) in item.childes">
								<image :src="item2.avatar" class="w-48 h-48 b-48 mr-20"></image>
								<view class="f jc-s-b f1">
									<view class="f f1 mr-32 fd-c" >
										<view class="fs-28 text-color3">{{ item2.memberNickname }}</view>
										<view class="fs-28 text-color4 mt-4">{{ item2.commentContent }}</view>
										<view class="f ai-c mt-8">
											<view class="mr-8 fs-24 text-color3">{{getTime(item2.updateTime)}} {{item2.city}}</view>
											<!-- <view class="fs-24 text-color2">回复</view> -->
										</view>
									</view>
									<view @click="commentZan(item2,index2)">
										<image src="http://cwht.ricecs.cn/app/novice/zaned.png" class="w-32 h-32 mb-8" v-if="item2.likeFlag"></image>
										<image src="http://cwht.ricecs.cn/app/novice/zan.png" class="w-32 h-32 mb-8" v-else></image>
										<view class="fs-20 text-color3">{{item2.commentLikeCount}}</view>
									</view>
								</view>
							</view>
							<!-- <view class="fs-24 text-color mt-12 ml-68" v-if="item2.childes">展开 {{item2.childes.length}} 条回复</view> -->
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="w-f pop-bot">
					<view class="f ai-c jc-s-b ph-32 h-100">
						<view class="w-400 h-72 b-72 pl-28 input f ai-c" @click="comment">
							<image src="http://cwht.ricecs.cn/app/novice/edit.png" class="w-28 h-28 mr-12"></image>
							<view style="color: #ccc;font-size: 24rpx;">说点什么吧…</view>
						</view>
						<view class="f ai-c f1 jc-f-e">

							<image src="http://cwht.ricecs.cn/app/novice/collect.png" class="w-40 h-40 mr-12" @click="handleFollow">
							</image>
							<view class="fs-28 fw-600  mr-42" :class="detail.followEnabled ? 'text-color' : 'text-color4'"
								@click="handleFollow">{{detail.followCount||0 }}</view>

							<image src="http://cwht.ricecs.cn/app/novice/zan.png" class="w-40 h-40 mr-12" @click="handleZan"></image>
							<view class="fs-28 fw-600 " :class="detail.likeEnabled ? 'text-color' : 'text-color4'" @click="handleZan">
								{{detail.likeCount||0}}
							</view>

						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
	
</template>
<script setup lang="ts">
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
	import Reply from './components/Reply.vue';
	import { ref, getCurrentInstance,onMounted } from 'vue';
	import { contentDetail, commentGet, commentLike, commentUnLike, likeIncrese, likeDecrese, followIncrese, followDecrese } from '@/services/api/novice';
	import { useAuthStore } from '@/store/modules/auth';
	const { proxy } = getCurrentInstance();
	const authStore = useAuthStore();
	const reply = ref();
	const show = ref(false);
	const userInfo = ref();
	const id = ref<number>();
	const show2 = ref(0);
	const detail = ref<any>({
		videoUrl: ''
	});
	const list = ref<any[]>([]);
	onLoad((options : any) => {
		userInfo.value = authStore.getUserInfo;
		id.value = options.id;
		if(options.show){
			show2.value=1
		}
		getDetail();
		getList();
	});
	onMounted(()=>{
		if(show2.value==1){
			reply.value.getShow(id.value, '说点什么吧...');
		}
	})
	onShareAppMessage((res : any) => {
		if (res.from === 'button') {
			// 判断分享是否来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: detail.value.title,
			path: `/pages_novice/videoDetail?id=${id.value}`,
		};
	});
	function close(){
		show.value=false
		reply.value.closeS()
	}
	function upDate() {
		getDetail();
		getList();
	}
	//关注
	async function handleFollow() {
		detail.value.followEnabled = !detail.value.followEnabled;
		if (detail.value.followEnabled) {
			await followIncrese({ id: id.value, followedId: detail.value.memberId });
		} else {
			await followDecrese({ id: id.value, followedId: detail.value.memberId });
		}
		getDetail();
	}
	//赞
	async function handleZan() {
		detail.value.likeEnabled = !detail.value.likeEnabled;
		if (detail.value.likeEnabled) {
			await likeIncrese({ id: id.value });
		} else {
			await likeDecrese({ id: id.value });
		}
		getDetail();
	}
	async function commentZan(item : any, index : number) {
		// detail.value.likeEnabled = !detail.value.likeEnabled;
		if (item.likeFlag) {
		await commentUnLike(item.id);
		} else {
		    await commentLike({ commentId: item.id });
		}
		getList();
	}
	function getTime(time:number){
			return proxy.$moment(time).format('YYYY/MM/DD HH:MM')
	}
	//获取评价
	async function getList() {
		const { data } = await commentGet({ contentId: id.value });
		data.forEach((item : any) => {
			item.updateTime = proxy.$moment(item.updateTime).format('YYYY/MM/DD HH:MM');
		});
		list.value = data;
	}
	//详情
	async function getDetail() {
		const { data } = await contentDetail({ id: id.value });
		data.updateTime = proxy.$moment(data.updateTime).format('YYYY/MM/DD HH:MM');
		data.urls = data.urls.split(',');
		detail.value = data;
		
	}
	//评论
	const comment = () => {
		show.value=true
		reply.value.getShow(id.value, '说点什么吧...');
	};
	//回复
	function handleReply(item : any) {
		reply.value.getShow(id.value, `回复 @${item.memberNickname}`, Number(item.id));
	}
	const fandleFull = () => {
		let videoContext = uni.createVideoContext('videoId', this);
		videoContext.requestFullScreen();
	};
	const toBack = () => {
		let pages = getCurrentPages()
		if(pages.length>1){
			uni.navigateBack()
		}else{
			uni.switchTab({
				url: '/pages/novice/index'
			})
		}
		
	};
	uni.setNavigationBarColor({
		frontColor: '#ffffff',
		backgroundColor: '#ffffff',
	});
	//头部
	const systemInfo = uni.getSystemInfoSync();
	const statusBarHeight = systemInfo.statusBarHeight;
</script>
<style lang="scss" scoped>
	::v-deep button {
		padding: 0;
		margin: 0;
		background-color: #1a1a1a;
		line-height: 0;
		width: 64rpx;
	}

	.videoDetail {
		height: 100vh;
		background: #1a1a1a;
		position: relative;
		width: 100%;

		.info {
			border-bottom: 1rpx solid #f0f0f0;
		}

		.pop-bot {
			border-top: 1px solid #f0f0f0;
		}

		.input {
			background: #f8f8f8;
			border: 1rpx solid #dddddd;
		}

		.comment {
			max-height: 800rpx;
		}

		.operate {
			border-top: 1px solid rgba(255, 255, 255, 0.1);
		}

		.input-box {
			background: #333333;
		}

		.full {
			background: rgba(255, 255, 255, 0.1);
		}

		.bot {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
		}

		.hearder {
			position: absolute;
			left: 0;
			top: 0;
		}
	}
</style>